<template>
  <div class="ShopCars">
    
    <van-cell-group>
      <van-cell title="购物数量" />
      <p>{{ valid.length }}</p>
      <van-button
        v-if="!empty"
        size="mini"
        @click="mini_button = false"
        v-show="mini_button"
        color="#000"
        plain
        type="primary"
        >管理</van-button
      >
      <van-button
        v-if="!empty"
        size="mini"
        @click="mini_button = true"
        v-show="!mini_button"
        color="#000"
        plain
        type="primary"
        >取消</van-button
      >
    </van-cell-group>
    <!-- 商品卡片 -->
    <!-- 购物车不为空 -->
    <van-checkbox-group v-model="result" ref="checkboxGroup">
      <div ref="card" class="kp" v-for="(v, index) in valid" :key="index">
        <!-- 复选框 -->
        <!-- v.productInfo.attrInfo.price * v.cart_num 价格*数量 =>改变value值 -->
        <van-checkbox 
          :value="v.productInfo.attrInfo.price * v.cart_num"
          @click="checkbox"
          ref="checkbox"
          :name="v.id"
        ></van-checkbox>
        <!-- 商品 -->
        <van-card
          :price="v.productInfo.attrInfo.price"
          :desc="`属性：${v.productInfo.attrInfo.suk}`"
          :title="v.productInfo.store_name"
          :thumb="v.productInfo.image"
        >
          <!-- 步进器 -->
          <template #footer>
            <van-stepper
              @minus="minus($event, v.id)"
              @change="plus($event, v.id)"
              v-model="v.cart_num"
              :name="v.id"
            />
          </template>
        </van-card>
      </div>
      <!-- 提交订单 -->
      <van-submit-bar v-if="!empty"
        v-show="mini_button"
        :price="total_prices"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox ref="allcheckbox" type="primary" @click="checkAll">
          全选
        </van-checkbox>
      </van-submit-bar>

      <van-cell class="cell_bto" v-show="!mini_button" v-if="!empty" value="内容">
        <van-checkbox ref="allcheckbox" type="primary" @click="delAll">
          全选</van-checkbox>
        <div>
          <van-button color="rgb(243, 37, 37)" plain hairline round type="info">
            收藏
          </van-button>
          <van-button
            @click="del"
            color="rgb(115, 115, 115)"
            hairline
            round
            type="info"
          >
            删除
          </van-button>
        </div>
      </van-cell>
    </van-checkbox-group>

    <!-- 购物车为空 -->
    <div class="hot-empty">
      <van-empty
        v-show="empty"
        class="custom-image"
        image="http://47.115.51.185/h5/img/noCart.6f2abfef.png"
      />
    </div>
    
    <!-- 为您推荐 -->
    <hot></hot>

  </div>
</template>

<script>
import Hot from "@/components/Hot";
export default {
  components: {
    Hot,
  },
  data() {
    return {
      mini_button: true,
      valid: [], //加入购物车的数据
      checked: false,
      total_prices: 0, //总金额
      result: [],
      results: [],
      sub: "",
      empty: false, //判断购物车是否为空
    };
  },
  created() {
    this.currentCart(); //当前购物车里面的物品
  },
  
  methods: {
    // 点击减少按钮时触发
    minus(e, id) {
      this.$axios.post("/cart/num", { id: id, number: e }).then(() => {
        // console.log(d);
        this.setTimeouta();
      });
    },
    // 点击增加按钮时触发
    plus(e, id) {
      this.axios.post("/cart/num", { id: id, number: e }).then(() => {
        this.setTimeouta();
      });
    },

    // 当前购物车里面的物品
    currentCart() {
      this.$axios.get("/cart/list").then((d) => {
        // console.log("cart= d==>", d);
        // vm.$nextTick()延迟到下一次DOM更新结束后立即执行
        // this.$nextTick(()=>{
        //   this.valid = d.valid;
        // })
        // 当前商品
        if (d.valid) {
          this.valid = d.valid;
        }
        if (d.valid.length <= 0) {
          this.empty = true; //购物车为空时
        }
      });
    },

    //提交订单
    onSubmit() {
      if (this.valid.length <= 0) {
        this.$toast("请下单");
      } else {
        let cbArr = this.$refs.checkbox;
        let sid = [];
        cbArr.map((v) => {
          if (v.checked) {
            sid.push(v.name);  //v.name如:11736
          }
        });
        // console.log("sid==>",sid)
        // join() 方法用于把数组中的所有元素放入一个字符串
        this.sub = sid.join(",");//数组转字符串
        // console.log("sub=>",this.sub)
        if (this.sub == "") {
          this.$toast("请添加商品");
        } else {
          this.$router.push("/submit/" + this.sub);
        }
      }
    },

    //删除商品
    del() {
      if (this.valid.length <= 0) {
        this.$toast("无可删除商品");
      } else {
        let b = this.$refs.checkbox;
        let a = [];
        b.map((d) => {
          // console.log("d.name", d);
          // console.log("d.checked",d.checked);
          if (d.checked) {
            a.push(d.name); // 如:name:11738
          }
        });
        this.axios.post("/cart/del", { ids: a }).then(() => {
          // this.plus();
          this.$router.push("/cart");
          this.currentCart();
          // console.log("this.$refs.allcheckbox==>",this.$refs.allcheckbox)
          this.$refs.allcheckbox.checked = false;
        });
      }
    },
    // 删除全部
    delAll() {
      if (this.valid.length <= 0) {
        this.$toast("请下单");
      } else {
        this.check();
      }
    },
    // 选中全部
    checkAll() {
      if (this.valid.length <= 0) {
        this.$toast("请下单");
      } else {
        this.check();
      }
    },
    check() {
      // 点击可切换模式
      this.checked = !this.checked;
      // 全选,并且跳过默认禁止的选框
      this.$refs.checkboxGroup.toggleAll({
        checked: this.checked,
        skipDisabled: true,
      });
      this.setTimeouta();
    },

    //复选框选中后,点击加/减调用
    setTimeouta() {
      var that = this;
      setTimeout(function () {
        let cbArr = that.$refs.checkbox;
        // console.log("cbArr==>", cbArr);
        let val = 0;
        // 循环选中的,获取value值
        cbArr.map((v) => {
          // 如果checked为true,即选中状态 执行
          if (v.checked) {
            val = val + v.value;
          }
        });
        that.total_prices = val * 100;
        // console.log("that.total_prices", that.total_prices);
      }, 100);
    },
    // 点击复选框触发
    checkbox() {
      let a = true;
      let c = this.$refs.allcheckbox;
      // console.log("c=>",c)
      let val = 0;
      let cbArr = this.$refs.checkbox;
      cbArr.map((v) => {
        if (!v.checked) {
          a = false;
          return;
        }
        if (v.checked) {
          val = val + v.value;
        }
      });
      this.total_prices = val * 100;
      c.checked = a;
    },
  },
};
</script>

<style lang="less" >
.ShopCars {
  margin-top: 50px;
  margin-bottom: 100px;
  background-color: rgb(245, 245, 245);
  .van-empty {
    background-color: white;
  }
  .van-cell-group {
    top: 0;
    position: fixed;
    z-index: 999;
    width: 100%;
    p {
      color: rgb(243, 37, 37);
      font-size: 14px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 80px;
    }
    .van-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 15px;
    }
  }
  .van-card {
    overflow: hidden;
    background-color: white;
    .van-card__title {
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }
    .van-card__desc {
      color: rgb(152, 152, 152);
      margin-top: 10px;
    }
  }
  // 商品卡
  .kp {
    margin-top: 10px;
    display: flex;
    align-items: center;
    background-color: white;
    .van-checkbox {
      padding: 0 10px 0 10px;
      width: 22px;
    }
    .van-card {
      position: relative;
      // 商品标题
      .van-card__title{
        /**** 一般的文字截断(适用于内联与块) ****/
        font-size: 14px;
        display: block; //内联对象需加
      }
      // 步进器
      .van-stepper{
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
    }
  }
  .van-submit-bar {
    margin-bottom: 50px;
    background-color: rgb(250, 250, 250);
  }
  .cell_bto {
    padding: 0 20px;
    height: 50px;
    position: fixed;
    bottom: 50px;
    background-color: rgb(250, 250, 250);
    .van-cell__value {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .van-button {
        height: 35px;
        width: 75px;
        margin-left: 10px;
        margin-right: 1px;
      }
    }
  }
  .hot-empty {
    padding: 0 15px;
  }
}
</style>